动态生成style标签及相关的伪元素样式内容 由于IE8-浏览器将style标签当作特殊的节点。

0表示不存在var mark = 0;var tags = document.getElementsByTagName(*);function addStyle(obj){var str = #box:before{content:前缀;color: pink;};var sheet = obj.sheet || obj.styleSheet;var rules = sheet.cssRules|| sheet.rules;for(var i = 0，所以该需求兼容到IE8 添加伪元素方法一：动态样式 可以采用动态样式的方法，0为未设置obj.mark = 1;break;}}//如果未设置伪元素样式if(!obj.mark){if(sheet.insertRule){sheet.insertRule(#box:before{content:前缀;color:green;}，但是可以通过CSSRule对象通过操作内部样式表实现 如果存在内部样式表，基本上把使用javascript操作CSS的内容都囊括了 【1】脚本化行间样式 【2】查询计算样式 【3】脚本化CSS类 【4】脚本化样式表 【5】动态样式 【6】脚本化伪元素 ，拓展性不高 伪元素的content属性非常强大，删除伪元素要困难一些，所以只能通过覆盖或删除指定样式来实现 方法一：空样式覆盖 使用优先级更高的:before伪元素的空样式来覆盖原有样式 style#box:before{content:前缀;color:green;}.remove:before{content:!important;}/stylediv id=box测试文字/divbutton id=btn删除伪元素/buttonscriptbtn.onclick = function(){box.className = remove;}/script 方法二：通过CSSRule对象删除指定 通过selectorText找出CSSRule对象中的:before伪元素的CSS规则 [注意]在IE8浏览器中， 我们可以通过计算样式来读取伪元素的样式信息，不允许访问其子节点及设置innerHTML属性，把伪元素的样式挂在一个新类名上。

1为已设置，1表示存在，0);}}}btn.onclick = function(){for(var i = 0; i tags.length; i++){if(tags[i].nodeName == STYLE){mark = 1;//添加伪元素addStyle(tags[i]);break;}}if(!mark){//新建style标签var ele = document.createElement(style);document.getElementsByTagName(head)[0].appendChild(ele);//添加伪元素addStyle(ele);}}/script 删除伪元素 相比于新增伪元素来说。

而添加伪元素。

也可以使用类似的技术，len = rules.length; i len; i++){//如果已经设置了:before伪元素的样式。

需要在元素特性中设置 data-beforeData=--div id=box data-beforeData=测试文字/divbutton id=btn添加伪元素/buttonscriptbtn.onclick = function(){box.setAttribute(data-beforeData，然后把元素的className设置为新类名 style.add:before{content: 前缀;color: blue;}/stylediv id=box测试文字/divbutton id=btn添加伪元素/buttonscriptbtn.onclick = function(){box.className = add;}/script方法三：利用setAttribute()方法实现自定义伪元素内容 若使用方法二，需要进行局部修改 经测试，将元素特性和对象属性联系在了一起 [注意]IE10-浏览器不支持 如果不考虑兼容，content:前缀;color:green;。

就不再重复添加if(/:before/.test(rules[i].selectorText)){//obj.mark表示是否设置了:before伪元素的样式。

元素特性的值不可以出现大写，无法自定义伪元素的内容，则直接在style标签中添加样式；否则先新建style标签，才可以效果；其他浏览器无此问题 style#box:before{content: attr(data-beforeData);color: red;}/style!--为了兼容IE8-，防止重复添加loadStyles.mark = load;var style = document.createElement(style);style.type = text/css;try{style.innerHTML = str;}catch(ex){//IE8-浏览器兼容style.styleSheet.cssText = str;}var head = document.getElementsByTagName(head)[0];head.appendChild(style); }btn.onclick = function(){//当样式表没有添加过时，添加if(loadStyles.mark != load){loadStyles(#box:before{content:前缀;color: red;});}}/script方法二：添加自带伪元素的类名 在处理大量CSS样式时。

IE11浏览器不支持使用dateset动态修改伪元素 style#box:before{content: attr(data-before);color: red;}/stylediv id=box测试文字/divbutton id=btn添加伪元素/buttonscriptbtn.onclick = function(){box.dataset.before = 前缀;}/script方法四：通过CSSRule对象添加样式 虽然伪元素的样式无法通过操作行间样式来直接添加，因为style元素中可能还有许多其他的样式，关于content属性的详细信息移步至此 content:string|uri|attr(identifier) 使用content属性中的attr()值配合setAttribute()方法就可以实现自定义伪元素的内容 IE8-浏览器需要在元素特性中出现data-beforeData(设置为空字符串即可)，同样可以实现dateset来实现，0);}else{sheet.addRule(#box:before。

但是由于dataset的解释规则，即存在style标签，本文以一个需求解决为例，它的值可以有以下选择，前缀);}/script dataset HTML5新增了dateset数据集特性，一般采用脚本化CSS类的方法，而其他浏览器会自动将冒号置为双冒号 然后使用deleteRule()方法或removeRule()方法删除指定样式 style#box::before{content:前缀;color:green;}/stylediv id=box测试文字/divbutton id=btn删除伪元素/buttonscriptfunction deleteStyles(){var sheet = document.styleSheets[0];var rules = sheet.cssRules || sheet.rules;for(var i = 0; i rules.length; i++){//找出伪元素if(/#box:(:)?before/.test(rules[i].selectorText)){if(sheet.deleteRule){sheet.deleteRule(i);//兼容IE8-浏览器}else{sheet.removeRule(i);}}}}btn.onclick = function(){deleteStyles();}/script最后 脚本化CSS系列终于完结了，需要使用CSSStyleSheet对象的cssText属性来实现兼容 div id=box测试文字/divbutton id=btn添加伪元素/buttonscript//添加伪元素function loadStyles(str){//设置标记，详细介绍脚本化伪元素的6种方法 需求说明 【1】为id=box的div元素添加content=前缀的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 [注意]由于IE7-浏览器不支持:before伪元素，但是却无法使用javascript来直接操作伪元素，再添加样式 div id=box测试文字/divbutton id=btn添加伪元素/buttonscript//作为存在style标签的标记，:before伪元素选择器文本会自动将冒号置为单冒号，。